<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input  type="text" id="box"><button @click="loadData" id="btn"> 查询</button>
      <div>
        <!-- v-for="item in 数组" -->
        <h1 v-for="sitem in list" :key="sitem">{{sitem}}</h1>
        <hr>
      </div>
      <hr>
      <div class="list" >
        <!-- v-for="(item,index) in 数组" 
        item 代表数组每一项 index数组的下标

        vue 为什么绑定 :key 由于 vfor循环 是虚拟dom生成的 元素
      在加载过程中 如果发生删除等操作，会产生位置错乱 所以绑定key 的唯一标识防止错乱 ， vue的虚拟dom渲染，采用了diff算法 diff算法里面的新旧节点比较 比较的是 tag标签名 和key 是否相同，所以key能让diff算法更高效  -->
        <div class="list_one" v-for="(ritem,index) in rubList"
        :key="ritem.name">
          <div>{{index}}--- 名称：{{ritem.name}} </div>
          <div>描述：{{ritem.contain}} </div>
        </div>
      </div>
      <!-- v-for 循环对象
      v-for="（v,k,index） in 对象"
        v---对象value 
        k -- 对象的key
        index 下标 -->
      <hr>
      <div>
        <h2 v-for="(v,k,index) in obj" :key="k">
            {{index}}---{{k}}---{{v}}
        </h2>
      </div>
      <!-- v-for 循环固定次数的渲染 
      item 从1 开始-->
      <hr>
      <div>
        <h1 v-for="item in 10" :key="item">第{{item}}项</h1>
      </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    new Vue({
       el:"#app",
       data(){
        return{
          list:["火锅","烧烤","铁锅炖"],
          rubList:[], //垃圾分类的数据
          obj:{
            name:"cf",
            des:"10亿鼠标的梦想",
            gun:"巴雷特"
          }
        }
       },
       methods: {
        loadData(){
          let that=this;
          let inp=document.querySelector("#box")

          let xhr=new XMLHttpRequest();

          xhr.open("get","https://api.oioweb.cn/api/common/rubbish?name="+inp.value,true)

          xhr.send();

          xhr.onreadystatechange=function(){
            if(xhr.status==200){
              console.log(xhr.responseText)
              let resobj=JSON.parse(xhr.responseText)
              that.rubList=resobj.result;
            }
          }
        }
       },
    })
  </script>
</body>
</html>